<template>
	<view class="content">
		<view class="wallet">
			<text>我的余额</text>
			<text>0.00</text>
			<view class="wallet-button">
				<button>去充值</button>
				<button>提现</button>
			</view>
		</view>

		<view class="wallet-bottom">
			<u-grid :border="false" col="4" bgColor="#fff">
				<u-grid-item @click="$u.route('/packagesMe/me/rebate')">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="red-packet" size="30px" color="#096ef5"></u-icon>
					<text>我的返利</text>
				</u-grid-item>
				<u-grid-item @click="$u.route('/packagesMe/me/account')">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="order" size="30px" color="#096ef5"></u-icon>
					<text>账户明细</text>
				</u-grid-item>
				<u-grid-item @click="$u.route('/packagesMe/me/recharge')">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="rmb-circle" size="30px" color="#096ef5"></u-icon>
					<text>充值记录</text>
				</u-grid-item>
				<u-grid-item @click="$u.route('/packagesMe/me/withdrawal')">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" name="rmb" size="30px" color="#096ef5"></u-icon>
					<text>提现记录</text>
				</u-grid-item>
			</u-grid>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.wallet {
			height: 650rpx;
			border-radius: 20rpx;
			background-color: #fff;
			text-align: center;
			padding: 130rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;

			text {
				color: #000000;
				display: block;
				margin: 10rpx 0;

				&:nth-child(1) {
					font-size: 28rpx;
				}

				&:nth-child(2) {
					font-weight: bold;
					font-size: 64rpx;
				}
			}

			.wallet-button {
				display: flex;
				align-items: center;
				justify-content: space-around;

				button {
					margin: 110rpx 20rpx 20rpx 20rpx;

					&:nth-child(1) {
						width: 317rpx;
						background-color: $overall-color;
						color: #fff;
						border-radius: 20rpx;
						padding: 25rpx 30rpx;
						box-sizing: border-box;
					}

					&:nth-child(2) {
						width: 317rpx;
						background-color: #EFEFEF;
						color: #666666;
						border-radius: 20rpx;
						padding: 25rpx 30rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.wallet-bottom {
			margin-top: 30rpx;
			background-color: #fff;
			padding: 50rpx 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
		}
	}
</style>